<template>
  <!-- nav-bar -->
  <van-nav-bar title="分类" placeholder fixed />

  <van-row>
    <!-- 左侧分类栏 -->
    <van-col span="5">
      <van-sidebar v-model="navbarActive" class="left-content">
        <van-sidebar-item :title="item" v-for="(item, index) in categoryList" :key="index" />
      </van-sidebar>
    </van-col>
    <!-- 右侧内容 -->
    <van-col span="19">
      <div class="right-content">
        <div style="background-color: black; height: 100px"></div>
        <!-- 分页器 -->
        <!-- <van-pagination
          v-model="currentPage"
          :total-items="allDataLength"
          :items-per-page="20"
          :show-page-size="5"
          force-ellipses
          id="Paging"
          @change="changePage($event)"
        /> -->
      </div>
    </van-col>
  </van-row>

  <!-- 底部导航栏 -->
  <van-tabbar v-model="tabbarActive" route placeholder>
    <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
    <van-tabbar-item icon="apps-o" to="/category">分类</van-tabbar-item>
    <van-tabbar-item icon="shopping-cart-o" to="/cart" :badge="cartArr.length">购物车</van-tabbar-item>
    <van-tabbar-item icon="user-o" to="/my">我的</van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
import { categoryListReq } from '@/api/category'
import { cartArr } from '@/stores/cart'
import { ref } from 'vue'
let tabbarActive = ref(1)
let navbarActive = ref(0)
let categoryList = ref([])

// // let allData = ref([])
// let allDataLength = ref(0)
// // let showData = ref([])
// const currentPage = ref(1)

//获取分类列表
getcategoryList()
// getallData()
function getcategoryList() {
  categoryListReq().then((res) => {
    categoryList.value = res.data.data
  })
}

// //换页
// function changePage(e = 1) {
//   showData.value = allData.value.slice((e - 1) * 20, e * 20)
//   console.log(showData.value)
// }
// //获取所有数据
// function getallData() {
//   axios.get(api.getProApi, { params: { count: 1, limitNum: 150 } }).then((res) => {
//     // console.log(res.data.data)
//     allData.value = res.data.data
//     allDataLength.value = allData.value.length
//     changePage()
//   })
// }
</script>

<style scoped>
.left-content {
  height: calc(100vh - 96px);
}

#Paging {
  position: fixed;
  width: 100%;
  bottom: 50px;
  left: 0;
}
</style>
